<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/shopping_cart.css">

</head>

<body>
    <div class="register">
        <div class="reg_all">
            <p>欢迎来到聚美优品！</p>
            <a href="./login.html">请登录</a>
            <a href="#">快速注册</a>
            <a href="#">正品保证</a>
            <a href="#">订单查询</a>
            <a href="#">♥收藏的品牌</a>
            <a href="#">我的聚美^</a>
            <a href="#" class="phone">📱手机聚美</a>
            <a href="#" class="more">更多</a>
        </div>
    </div>



    <!-- search -->
    <div class="search">
        <img src="./img/logo_new_v1.jpg" alt="">
        <div>
            <input type="text" id="input_import">
            <input type="button" value="搜索" id="input_scearh">
        </div>
        <ul>
            <li>
                <a href="#">面膜</a>
                <s>|</s>
            </li>
            <li><a href="#">保湿</a><s>|</s></li>
            <li><a href="#">保湿</a><s>|</s></li>
            <li><a href="#">洗面奶</a><s>|</s></li>
            <li><a href="#">补水</a><s>|</s></li>
            <li><a href="#">香水</a><s>|</s></li>
            <li><a href="#">眼霜</a><s>|</s></li>
            <li><a href="#">口红</a><s>|</s></li>
            <li><a href="#">护肤套装</a><s></s></li>
        </ul>
    </div>
    <hr class="hr0">
    <div class="group_show">
        <span id="time_01"> </span>
        <div>
            <ul class="icon_mm">
                <li><a href="#"> <span></span> </a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </div>
    </div>
    <div class="top_masg">
        <input type="checkbox" name="" id="checkbox_01">
        <span class="name">名品特卖</span>
        <span class="prise">聚美价（元）</span>
        <span class="count">数量</span>



        <!-- 购物车 -->
    </div>
    <div class="commodities">
    </div>
    <script src="./js/time.js"></script>
</body>

</html>
<script>
    var res_data = [{
        "goods_img": "./img/4934114_dx_1000_400.jpg",
        "goods_name": "【99元选3件】日本•花印清新净颜卸妆水",
        "goods_style": "【型号】容量：380ml",
        "goods_prise": 59,
        "goods_counts": 1,
    },
    {
        "goods_img": "./img/4934114_dx_1000_400.jpg",
        "goods_name": "99元选3件】日本•花印清新净颜卸妆水",
        "goods_style": "【型号】容量：380ml",
        "goods_prise": 69,
        "goods_counts": 2,
    },
    {
        "goods_img": "./img/4934114_dx_1000_400.jpg",
        "goods_name": "99元选3件】日本•花印清新净颜卸妆水",
        "goods_style": "【型号】容量：380ml",
        "goods_prise": 79,
        "goods_counts": 3,
    },{
        "goods_img": "./img/4934114_dx_1000_400.jpg",
        "goods_name": "99元选3件】日本•花印清新净颜卸妆水",
        "goods_style": "【型号】容量：380ml",
        "goods_prise": 49,
        "goods_counts": 2,
    },{
        "goods_img": "./img/4934114_dx_1000_400.jpg",
        "goods_name": "99元选3件】日本•花印清新净颜卸妆水",
        "goods_style": "【型号】容量：380ml",
        "goods_prise": 49,
        "goods_counts": 2,
    }
    ]

    let goods_html = ``
    res_data.forEach(goods => {
    goods_html += `
    <div class="goods_lists">
        <input type="checkbox" name="" id="checkbox">
        <span class="goods_img"><img src="./img/4934114_dx_1000_400.jpg" alt=""></span>
        <span class="goods_name">${goods.goods_name}</span>
        <span class="goods_style">${goods.goods_style}</span>
        <span class="goods_prise">${goods.goods_prise}元</span>
        <span class="goods_counts">
            <input type="button" value="-">
            <input type="text" value="${goods.goods_counts}" id="goods_counts">
            <input type="button"
                value="+">
        </span>
        </div>`
    })
    document.querySelector(".commodities").innerHTML = goods_html




</script>